<template>
  <div class="menu">
    <van-search v-model="food" shape="round" background="#fff" placeholder="请输入菜名" />
    <van-tabs type="card" background="#fff" color="#079f40" :animated="true" :swipeable="true">
      <!-- 菜品分类渲染 -->
      <van-tab v-for="item in foodCategory" :title="item" >
        <!-- 每一项菜品分类 -->
        <van-grid column-num="2" icon-size="120">
          <van-grid-item v-for="item in sellFood" :key="item.id" :icon="item.image" to="/food">
            <template #text>
              <div>
                <span class="food">{{ item.title }}</span>
                <div class="food-time">
                  <span>{{ item.time }}</span>
                  <span>{{ item.num }}</span>
                </div>
              </div>
            </template>
          </van-grid-item>  
        </van-grid> 
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import useMenuStore from '../../store/menu.js'
const food = ref()
const foodCategory = reactive(['推荐', '人气', '家常菜', '下饭菜'])
const store = useMenuStore()
let sellFood = store.foodList
</script>

<style  scoped>
.food {
  display: block;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
}

.food-time {
  width: 100%;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
}

.food-time>span {
  font-size: 12px;
  color: #999;
}
</style>
